<template>
    <div style="width: 70px;position: absolute;right: 40px;top: 100px;min-height: 70px;background-color: #101A64;">
      <div class="eidt_item" style="padding: 0"  v-show="!isFold" @click="open">
        <span class="iconfont icon-caidan-tianchong" style="height: 70px;line-height: 70px"></span>
      </div>
      <div v-show="isFold">
<!--        <div class="eidt_item" @click.stop="toggleDk">-->
<!--          <span class="iconfont icon-liebiao"></span>-->
<!--          <span>地块列表</span>-->
<!--        </div>-->
        <div class="split_line"></div>
        <div  :class="{'active':curFun==='DrawArea','eidt_item':true}" @click.stop="toggleDraw">
          <span class="iconfont icon-huizhi"></span>
          <span>绘制</span>
        </div>
        <div class="split_line"></div>
        <div class="eidt_item" @click.stop="addSelectDK">
          <span class="iconfont icon-tianjia"></span>
          <span>编辑属性</span>
        </div>
        <div class="split_line"></div>
        <div class="eidt_item" @click.stop="union">
          <span class="iconfont icon-hebing"></span>
          <span>合并</span>
        </div>
        <div class="split_line"></div>
        <div class="eidt_item" :class="{'active':curFun==='DrawLine','eidt_item':true}" @click.stop="toggleSplit">
          <span class="iconfont icon-fenge"></span>
          <span>分割</span>
        </div>

        <div class="split_line"></div>
        <div class="eidt_item" @click.stop="deleteSelect">
          <span class="iconfont icon-shanchu"></span>
          <span>删除</span>
        </div>
        <div class="split_line"></div>
        <div class="eidt_item" style="padding: 0" @click.stop="fold">
          <span class="iconfont icon-zhedie4" style="height: 70px;line-height: 70px"></span>
        </div>
      </div>
    </div>
</template>

<script>
    import DrawArea from "../../model/DrawArea";
    import DrawLine from "../../model/DrawLine";
    import MapCommon from "../../common/MapCommon";
    import Graffiti from "../../model/Graffiti";

    export default {
      props: {
        tyActive: {
          type: Boolean,
          default() {
            return true
          }
        },
        stateManager: {
          type: Object,
          default: null
        },
        map: {
          type: Object,
          default: null
        },
        curFun: {
          type: String,
          default: ""
        },
        selectFeatures: {
          type: Array,
          default: []
        }
      },
      name: "EditGroup",
      data(){
        return{
          isFold:true,
          //点击高亮样式
          activeStyle: {
            color: '#fff'
          },
        }
      },
      watch: {
        tyActive(newVal) {
          if(newVal) {
            this.activeStyle.color = '#0AC8FF'
          } else {
            this.activeStyle.color = '#ffffff'
          }
        }
      },
      mounted(){

      },
      computed:{
      },

      methods:{
        errorCallBack(msg){
          this.$message.error(msg)
        },
        toggleDraw(){
          if(this.curFun==="DrawArea"){
            this.stateManager.removeCurrent();
          }else {

              this.stateManager.setCurFun(new DrawArea(this.map,{callBack:this.addCallBack,errorCallBack:this.errorCallBack}));
          }
        },
        toggleSplit(){
          if(this.curFun==="DrawLine"){
            this.stateManager.removeCurrent();
          }else {
            if(!this.selectFeatures||this.selectFeatures.length!==1){
              this.$emit("error","请选中一个地块");
            }else {
              this.stateManager.setCurFun(new DrawLine(this.map,{callBack:this.splitCallBack}),true);
            }
          }
        },
        splitCallBack(set){

          //执行分割
          let res=MapCommon.splitPolygon(this.selectFeatures[0],set.features[0]);
          this.$emit("splitCallBack",res);
          //清除绘制工具
          this.stateManager.removeCurrent();
        },
        addCallBack(feature){
          if(!feature){
            return
          }
          this.$emit("addCallBack", [feature]);
        },
        addSelectDK(){
          this.$emit("addSelectDK");
        },
        union(){
          this.$emit("union");
        },
        deleteSelect(){
          this.$emit("deleteSelect");
        },
        fold(){
           this.isFold=false;
         },
        open(){
           this.isFold=true;
        },
      }
    }
</script>

<style scoped>
   .eidt_item{
     height: 70px;
     width: 70px;
     color: white;
     text-align: center;
     display: -webkit-flex;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     padding-top: 5px;
   }
   .eidt_item:hover,.active{
     color: #0AC8FF!important;
   }
  .eidt_item span:first-child{
    height: 40px;
    line-height: 40px;
    font-size: 30px;
  }
   .eidt_item span:last-child{
    height: 20px;
    line-height: 20px;
  }
  .split_line{
    width: 56px;
    margin-left: 7px;
    height: 1px;
    background: #283170;
    border-radius: 1px;
  }
</style>
